import React, { Component, PureComponent } from 'react'

// PureComponent,Component
/**
 * Component: 每次更新数据 都会重新执行生命周期，不管值更新前后是否发生变化 都会执行生命周期
 * PureComponent： 在数据更新前，会判断 数据更新前后的值是否发生变化，如果没有发生变化，自动在  shouldComponentUpdate 返回false，不继续执行生命生命周期，反之 只有数据发生了变化 才会执行生命周期
 * 
 */

export default class ClassComponent extends PureComponent {
    // ============================= 初始化生命周期 ===========================================
    // 类组件的第一个生命周器
    // 如果要使用constructor的的话 需要接收一个props，并且使用super函数修正constructor中的this指向
    constructor(props) {
        super(props)

        this.state = {
            title: '1907A'
        }
    }

    // 第二个生命周期，表示 dom渲染前
    componentWillMount() {
        console.log(this)
    }

    // 第三个生命周期  生命周期，用于做diff算法 渲染页面
    // 通过diff 算法生成一颗虚拟dom树，表现每一个节点的属性方法内容
    render() {
        const { title } = this.state
        const { name } = this.props
        return (
            <div>
                <h1>{title}</h1>
                <p>父组件传入的name：{name}</p>
                <button onClick={() => this.setState({ title: '八维' })} >改变state</button>
            </div>
        )
    }

    // 第四个生命周期
    // dom 渲染之后，一般用作用初始化axios的请求
    componentDidMount() {

    }

    // ====================================== 更新阶段 =======================
    // 监听 props 的变化，如果prosp发生变化，就会触发，接收一个新的props，在当前生命周期中打印this.props 是旧值
    componentWillReceiveProps(nextProps) {
        // console.log(nextProps)
        // console.log(this.props)
    }

    // 做优化，此生命周期 接收两个参数  要求此生命周期必须要有返回值  且返回值必须为boolean值，如果返回true 继续执行生命周期，如果返回false 停止执行生命周期
    // shouldComponentUpdate(nextProps, nextState) {
    //     return true
    // }

    // 数据更新之前  接收两个参数，新的props 和新的 state  在当前生命周期中打印this.state, this.props均为更新前的旧值
    componentWillUpdate(nextProps, nextState) {
        // console.log(nextProps, nextState)

        // console.log(this.props, this.state)
    }

    // render
    // 通过diff算法 生成一颗虚拟dom树，并且与旧树相比较，找到差异最小的节点，进行局部更新


    // 数据更新之后 接收两个参数，旧的props 和旧的 state  在当前生命周期中打印this.state, this.props均为更新后的新值
    componentDidUpdate(prveProps, prveState) {

        console.log(prveProps, prveState)

        console.log(this.props, this.state)
    }


    // =========================== 销毁阶段======================
    componentWillUnmount() {
        // 主动销毁stats以及props
        // 主动销毁addEventListener 事件监听器
        // 主动销毁，定时器，延时器等

        // 窗口关闭前做一些事情 例如：删除一些本地存储，关闭 ws（socket） 服务
    }

    // 用户替换 componentWillUpdate 生命周期
    // getSnapshotBeforeUpdate(nextProps, prveState) {

    // }
 
    // 替换 componentWillReceiveProps  如果返回null 停止更新生命周期
    // static getDerivedStateFromProps() {
    //     return null
    // }

}
